 <!-- dat.gui threejs 官方调试工具
    地球与月球
-->
<template>
    <div ref="Cavans"></div>
</template>
<script setup>
import { createHelper, resizeHandler, THREE, createGui } from '@/utils/threejs'
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module';
import earthImg from '@/assets/earth.jpeg'
import moonImg from '@/assets/moon.jpeg'

const Cavans = ref(null)
const guiConfig = {
    wireframe: false,
    color: 0Xacffdc
}
// 创建一个场景
const scene = new THREE.Scene()
// 初始化调试
const gui = createGui()
// 添加相机   PerspectiveCamera 透视投影相机 四个参数 视野角度（FOV）长宽比（aspect ratio）近截面（near） 远截面（far）
const camera = new THREE.PerspectiveCamera( 75, document.body.clientWidth / document.body.clientHeight, 0.1, 100 )
camera.position.set(1, 0.5, 10)
camera.lookAt(scene.position)
scene.add(camera)
// 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿
})
// 创建辅助
// createHelper(scene)
// 优化 设置像素比
renderer.setPixelRatio(window.devicePixelRatio || 1)
// 渲染器的尺寸
renderer.setSize(document.body.clientWidth, document.body.clientHeight)
// 颜色
const color = new THREE.Color(Math.random(), Math.random(), Math.random())
// SphereGeometry 几何体 创建一个月球体 
const moon = new THREE.SphereGeometry(0.5,32,16)
const moonTexture = new THREE.TextureLoader().load(moonImg)
const moonMaterial = new THREE.MeshBasicMaterial({
        // color,
        map: moonTexture
    })
// Mesh 网格  网格包含一个几何体 geometry 以及作用在此几何体上的材质 material
const moonMesh = new THREE.Mesh(moon, moonMaterial);
moonMesh.position.set(-1, 0, 0)
// 创建一个地球球体
const earth = new THREE.SphereGeometry(2)
const earthTexture = new THREE.TextureLoader().load(earthImg)
const earthMaterial = new THREE.MeshBasicMaterial({ 
    // color,
    // wireframe: true
    map: earthTexture
})
const earthMesh = new THREE.Mesh(earth, earthMaterial)
earthMesh.position.set(0, 0, 0)
// 调用 scene.add()，物体将会被添加到 (0,0,0) 坐标
scene.add(moonMesh, earthMesh)
const controls = new OrbitControls(camera,renderer.domElement) 
// 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。 请注意，如果该值被启用，你将必须在你的动画循环里调用update()
controls.enableDamping = true 
// 当.enableDamping设置为true的时候，阻尼惯性有多大。 Default is 0.05. 请注意，要使得这一值生效，你必须在你的动画循环里调用 update()
controls.dampingFactor = 0.03
// 添加性能监控器
const stats = new Stats()
stats.setMode(0)
const clock = new THREE.Clock()
const animate = () => {
    const elapsedTime = clock.getElapsedTime()
    // 浏览器API
	requestAnimationFrame( animate );
    // 相机运动
    // cube.position.z = Math.cos(3)
    // cube.position.y = Math.sin(elapsedTime)
    // cube.rotation.x += 0.01;   
    moonMesh.position.x = Math.cos(elapsedTime*0.6) * 5
    moonMesh.position.z = Math.sin(elapsedTime*0.6) * 5
    moonMesh.rotation.y += 0.01; 
    earthMesh.rotation.y += 0.005;
    controls.update() // 更新轨道控制器  
    stats.update() // 更新监控帧数
	renderer.render( scene, camera );
}
animate();
// 自适应
resizeHandler(renderer, camera)
// gui 调试
// gui.add() 
// 参数 target: object, propName: never, min?: number, max?: number, step?: number
gui.add(camera.position,'x',0.1,10,0.1).name('positionX')
gui.add(moonMesh.rotation,'x',1,10,1).name('rotationX')
// 参数为自定义对象
gui.add(guiConfig,'wireframe').onChange((val)=>{
    // wireframe 是否启用线框模式，默认为 false
    moonMesh.material.wireframe = val
}).name('moonWireframe')
gui.add(guiConfig,'wireframe').onChange((val)=>{
    // wireframe 是否启用线框模式，默认为 false
    earthMesh.material.wireframe = val
}).name('earthWireframe')
gui.add(camera, 'fov', 30, 120 , 1).onChange((val)=>{
    camera.fov = val // 相机参数 视场角 fov改变
    camera.updateProjectionMatrix() // 当相机的参数发生变化时，更新相机的投影矩阵
})
//颜色调试
gui.addColor(guiConfig, 'color').onChange((val)=>{
    moonMesh.material.color.set(val)
})
onMounted(()=>{
    // 挂载
    Cavans.value.appendChild(renderer.domElement)
    Cavans.value.appendChild(stats.domElement)
})
</script>
